<!--  -->
<template>
  <div class="login">
    <!-- 头 -->
    <div class="login_header" @click="isshow">
      <!-- 左 -->
      <div class="header_left">
        <img
          :src="
            isLogin
              ? userData.userList.avatar
              : ''
          "
          alt=""
        />
        <div class="p">
          {{ isLogin ? userData.userList.nickname : "点击登录" }}
        </div>
      </div>
      <!-- 右 -->
      <div class="header_right">
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 弹出框 -->
    <div class="login_dialog" v-show="isShowModal">
      <div
        class="model"
        @click="isShowModal = !isShowModal"
        v-show="isShowModal"
      ></div>
      <van-form @submit="onSubmit" class="login_form">
        <van-cell-group inset>
          <van-field
            v-model="userData.userInfo.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="userData.userInfo.pwd"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            round
            block
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            native-type="submit"
          >
            登录
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 退出弹出框 -->
    <van-popup v-model:show="edit" position="bottom" :style="{ height: '30%' }">
      <div
        style="
          width: 100%;
          height: 60px;
          font-size: 20px;
          line-height: 60px;
          text-align: center;
        "
      >
        是否退出？
      </div>
      <div
        class="button"
        style="width: 100%; display: flex; justify-content: center"
      >
        <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="editL"
        >
          确定
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Dialog } from "vant";
import { login } from "@/api/api.ts";
import { useStore } from "vuex";
let edit = ref(false);
let isLogin = ref(false);
const store = useStore();
let userData = reactive({
  userInfo: {
    username: "admin",
    pwd: "123456",
  },
  // 登录的用户数据
  userList: {},
});
// 登录框显示与否
let isShowModal = ref(false);
const isshow = () => {
  if (isLogin.value === false) {
    isShowModal.value = true;
  } else {
    isShowModal.value = false;
    edit.value = true;
  }
};
const onSubmit = async (values) => {
  console.log(values);
  const res = await login(userData.userInfo);
  store.commit("savaToken", res.data.token);
  store.commit("savaUserInfo", res.data.userInfo);
  console.log(res);
  location.reload();
};
onMounted(() => {
  if (localStorage.getItem("token")) {
    userData.userList = JSON.parse(window.localStorage.getItem("userInfo"));
    console.log(userData.userList);
    isLogin.value = true;
  }
});
// 退出
const editL = () => {
  localStorage.clear();
  location.reload();
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.login_header {
  width: 100%;
  padding: 40px 20px;
  background-color: #333333;
  font-size: 36px;
  color: #fff;
}
.login_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login_header .header_left {
  display: flex;
  align-items: center;
}
.header_left .p {
  margin-left: 10px;
}
.login_header img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
.model {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 666;
}
/* .login_dialog {
  z-index: 999;
} */
.login_form {
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  margin-top: -30%;
  margin-left: -44%;
  z-index: 999999;
}
/* .login_form {
  z-index: 9999;
} */
</style>
